<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-dialog :visible.sync="visible" title="编辑">
    <el-form>
      <el-form-item>
        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('update:visible', false)">取消</el-button>
        <el-button :loading="editLoading" type="primary" @click="handlerClick">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { MessageBox, Message } from "element-ui";

// 1期优化代码
function handleConfirmFlow(fn) {
  return async function (...args) {
    try {
      // 提交包含二次确定
      await MessageBox.confirm("确认提交吗？");
      await fn.call(this, ...args);
    } catch (error) {
      // 统一对错误进行拦截
      if (error === "cancel") {
        Message.info("提交已取消");
      } else {
        Message.error(error.message || "提交失败");
      }
    }
  };
}

// 模拟接d口请求
const api = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });
};

export default {
  props: ["visible", "form", "editRow"],
  data() {
    return {
      editLoading: false,
    };
  },
  methods: {
    handlerClick: handleConfirmFlow(async function () {
      // 第一期优化后的函数
      this.editLoading = true;
      await api({
        xxxname: this.editForm,
      });
      this.editLoading = false;
      this.$emit("update:visible", false);
      // 反写数据 -- 刷新接口
      // this.getList()
      // 反写数据 -- 直接修改数据
      // eslint-disable-next-line vue/no-mutating-props
      this.editRow.name = this.form.name;
      this.$message.success("修改成功");
    }),
  },
};
</script>
